<template>
  <div class="edu-page-warp">
    <div class="edu-page-title">{{ $t('message.filterCondition') }}</div>
    <el-card shadow="never" body-style="padding: 24px;">
      <el-form ref="queryForm" :model="queryForm" label-width="100px" class="bg-white pd-12px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="文件名称:">
              <el-input v-model="queryForm.fileName" placeholder="请输入文件名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模块名称:">
              <el-input v-model="queryForm.moduleName" placeholder="请输入模块名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="进度状态:">
              <el-select v-model="queryForm.rateStatus">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="resetContent float-right">
              <el-button @click="reset">{{ $t('message.reset') }}</el-button>
              <el-button type="primary" @click="query">{{ $t('message.filter') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="edu-page-title" style="margin-top: 6px">文件列表</div>
    <el-card>
      <el-table :data="files" size="mini" tooltip-effect="light">
        <el-table-column show-overflow-tooltip label="文件名">
          <template slot-scope="scope">{{ scope.row.fileName }}</template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="文件链接">
          <template slot-scope="scope">{{ scope.row.fileLacation }}</template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="模块名称">
          <template slot-scope="scope">{{ scope.row.moduleName }}</template>
        </el-table-column>
        <el-table-column label="进度状态">
          <template slot-scope="scope">{{ scope.row.rateStatus | formatStatus(statusOptions) }}</template>
        </el-table-column>
        <el-table-column label="进度百分比">
          <template slot-scope="scope">{{ (scope.row.processRate || 0) + '%' }}</template>
        </el-table-column>
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="downloadfile(scope.row.fileLacation)"
            >{{$t('workbench.download')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="edu-pagination">
        <div class="float-right">
          <el-pagination
            :current-page="queryForm.pageNum_"
            :page-sizes="[20,50,100,500,1000]"
            :page-size="queryForm.pageSize_"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            style="float: right;margin:10px 60px 0 0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getFileList } from 'common/src/api/publicExport'
import { downloadfile } from 'common/src/api/upload'
export default {
    data() {
        return {
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                fileName: '',
                moduleName: '',
                rateStatus: '',
                relationType: "02"
            },
            statusOptions: [
                { label: '进行中', value: 1 },
                { label: '已成功', value: 2 },
                { label: '部分成功', value: 3 },
            ],
            files: [],
        }
    },
    methods: {
        reset() {
            this.queryForm = {
                pageNum_: 1,
                pageSize_: 20,
                fileName: '',
                moduleName: '',
                rateStatus: '',
                relationType: "02"
            }
            this.query(this.queryForm)
        },
        query() {
            getFileList(this.queryForm).then((response) => {
                let {
                    code,
                    data: { list, total_ },
                } = response
                if (code === 200) {
                    this.files = list
                    this.total = total_
                }
            })
        },
        downloadfile,
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.query()
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.query()
        },
    },
    activated() {
        this.query()
    },
    filters: {
        formatStatus(value, list) {
            let status = list.find((item) => item.value == value)
            if (status) {
                return status.label
            }
            return list[0].label
        },
    },
}
</script>
<style>
</style>
